import { request } from "../../request/request.js"
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //右侧的菜单数据
    leftMenuList: [],
    //左侧的商品数据
    rightContentList: [],
    //当前选中的菜单下标
    currentIndex: 0,
    //右则轮动条的位置
    position: 0
  },
  Cates: [],
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //获取分类数据，如果本地缓存中存在
    //并且没有过期，则使用本地缓存数据
    this.getCates_Cache();

  },
  //使用小程序的本地缓存技术
  getCates_Cache() {
    //数据格式：{time:Date.now(), data:[...]}
    const Cates = wx.getStorageSync("Cates").data;
    //判断是不是存在本地缓存数据
    if (!Cates) {
      //发送请求获取数据
      this.getCates();
    } else {
      //判断数据是否过期, 过期时间：10s
      //不过期，则使用本地缓存数据
      if ((Date.now() - Cates.time) > 1000 * 10) {
        this.getCates();
      } else {
        //将数据保存到当前页面中的Cates
        this.Cates = Cates;
        //构造左侧的大菜单数据
        let leftMenuList = this.Cates.map(v => v.cat_name);
        //构造右侧的商品数据
        let rightContentList = this.Cates[0].children;
        //设置左边菜单和右边内容的数据
        this.setData({
          leftMenuList,
          rightContentList
        })
      }
    }
  },
  //发送异步请求，获取分类数据
  async getCates() {
    // request({ url: "/categories" })
    //   .then(result => {
    //     //提取返回的数据
    //     this.Cates = result.data.message;
    //     //设置本地缓存
    //     wx.setStorageSync("Cates", { time: Date.now(), data: this.Cates });
    //     //构造左侧的大菜单数据 
    //     let leftMenuList = this.Cates.map(v => v.cat_name);
    //     //构造右侧的商品数据
    //     let rightContentList = this.Cates[0].children;
    //     //设置左边菜单和右边内容的数据
    //     this.setData({
    //       leftMenuList,
    //       rightContentList
    //     })
    //   })

    //使用es7中的async语法，号称异步请求的最终解决方案。。。
    const result = await request({ url: "/categories" });
  // 提取返回的数据
    this.Cates = result.data.message;
    //设置本地缓存
    wx.setStorageSync("Cates", { time: Date.now(), data: this.Cates });
    //构造左侧的大菜单数据
    let leftMenuList = this.Cates.map(v => v.cat_name);
    //构造右侧的商品数据
    let rightContentList = this.Cates[0].children;
    //设置左边菜单和右边内容的数据
    this.setData({
      leftMenuList,
      rightContentList
    })

  },
  //实现左边菜单的点击事件
  //功能：改变当前选中的菜单的样式，和内容
  handleItemTap(e) {
    //获取当前选中的菜单的下标index
    const { index } = e.currentTarget.dataset;
    //获取对应菜单下的右边的内容
    let rightContentList = this.Cates[index].children;
    //更新数据,并设置右边内容的开始位置
    this.setData({
      rightContentList,
      currentIndex: index,
      position: 0
    })
  }
})